<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.css">
</head>
<body>
    <div class="container" id="demodiv">
        <div class="form-group">
        <input type="text" class="form-control" placeholder="用户名" v-model="inputa">
      </div>
      <div class="form-group">
        <input type="text" class="form-control" placeholder="年龄" v-model="inputb">
      </div>

      <button type="button" class="btn btn-success" @click="add()">添加</button>

      <button type="button" class="btn btn-info" v-on:click="kong()">重置</button>

      <h1>用户信息表</h1>
      <table class="table table-bordered text-center">
          <tr>
              <td>编号</td>
              <td>姓名</td>
              <td>年龄</td>
              <td>操作</td>
          </tr>
          <tr v-for="(v,i) in obj">
              <td>{{i+1}}</td>
              <td>{{v.name}}</td>
              <td>{{v.age}}</td>
              <td> 
              <button type="button" class="btn btn-danger">删除</button>
               </td>
          </tr>
        
          <tr>
              <td colspan="4" class="text-right"><button class="btn btn-success" data-toggle="modal" data-target="#modal-id">删除全部</button></td>
            
          </tr>
      </table>
    </div>






<div class="modal fade" id="modal-id">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title">Modal title</h4>
            </div>
            <div class="modal-body">
                
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary">Save changes</button>
            </div>
        </div>
    </div>
</div>

  




 
    <script src="node_modules/jquery/dist/jquery.js"></script>
    <script src="node_modules/bootstrap/dist/js/bootstrap.js"></script>
    <script src="node_modules/vue/dist/vue.min.js"></script>
    <script>
        new Vue({
            el:"#demodiv",
            data:{
                inputa:"",
                inputb:"",
                obj:[
                    {name:"xix1i",age:181},
                    {name:"xix2i",age:182},
                    {name:"xix3i",age:183},
                    {name:"xix4i",age:184}
                ]
            },
            methods:{
                    add(){
                        this.obj.push({name:this.inputa,age:this.inputb})
                        this.kong()
                    },
                    kong(){
                        this.inputa="";
                        this.inputb="";
                    }
            }
        })
    </script>
</body>
</html>